<template>
  <view class="vehicle-detail-container">
    <!-- 顶部状态卡片 -->
    <view class="status-card">
      <view class="status-header">
        <view class="vehicle-plate-large">
          <uni-icons type="shop" size="30" color="#1890ff"></uni-icons>
          <text class="plate-text">{{ vehicleInfo.vehiclePlate }}</text>
        </view>
        <view :class="['status-badge', vehicleInfo.status === '0' ? 'active' : 'inactive']">
          {{ vehicleInfo.status === '0' ? '正常' : '停用' }}
        </view>
      </view>
      <view v-if="vehicleInfo.isDefault === '1'" class="default-tag">
        <uni-icons type="star-filled" size="16" color="#ff9500"></uni-icons>
        <text>默认车辆</text>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="info-section">
      <view class="section-header">
        <view class="section-title">基本信息</view>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">车辆类型</text>
          <text class="info-value">{{ getVehicleTypeName(vehicleInfo.vehicleType) }}</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.vehicleBrand">
          <text class="info-label">品牌型号</text>
          <text class="info-value">{{ vehicleInfo.vehicleBrand }} {{ vehicleInfo.vehicleModel || '' }}</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.vehicleColor">
          <text class="info-label">车辆颜色</text>
          <text class="info-value">{{ vehicleInfo.vehicleColor }}</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.loadCapacity">
          <text class="info-label">载重量</text>
          <text class="info-value">{{ vehicleInfo.loadCapacity }}吨</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.vehicleVin">
          <text class="info-label">车辆识别码</text>
          <text class="info-value">{{ vehicleInfo.vehicleVin }}</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.engineNumber">
          <text class="info-label">发动机号</text>
          <text class="info-value">{{ vehicleInfo.engineNumber }}</text>
        </view>
      </view>
    </view>

    <!-- 驾驶员信息 -->
    <view class="info-section">
      <view class="section-header">
        <view class="section-title">驾驶员信息</view>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">驾驶员姓名</text>
          <text class="info-value">{{ vehicleInfo.driverName || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">联系电话</text>
          <view class="info-value">
            {{ vehicleInfo.driverPhone || '-' }}
            <view v-if="vehicleInfo.driverPhone" class="call-btn" @click="makeCall">
              <uni-icons type="phone" size="16" color="#1890ff"></uni-icons>
              拨打
            </view>
          </view>
        </view>
        <view class="info-item" v-if="vehicleInfo.driverLicense">
          <text class="info-label">驾驶证号</text>
          <text class="info-value">{{ vehicleInfo.driverLicense }}</text>
        </view>
      </view>
    </view>

    <!-- 证件信息 -->
    <view class="info-section" v-if="hasLicenseImages">
      <view class="section-header">
        <view class="section-title">证件信息</view>
        <view class="more-btn" @click="viewLicenses">
          查看全部
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
      <view class="license-preview">
        <view class="license-group" v-if="drivingLicenseImages.length > 0">
          <text class="license-label">行驶证</text>
          <view class="license-images">
            <image
              :src="drivingLicenseImages[0]"
              class="license-thumb"
              mode="aspectFill"
              @click="previewImage(drivingLicenseImages, 0)"
            ></image>
          </view>
        </view>
        <view class="license-group" v-if="operatingLicenseImages.length > 0">
          <text class="license-label">营运证</text>
          <view class="license-images">
            <image
              :src="operatingLicenseImages[0]"
              class="license-thumb"
              mode="aspectFill"
              @click="previewImage(operatingLicenseImages, 0)"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="info-section" v-if="vehicleInfo.remark">
      <view class="section-header">
        <view class="section-title">备注信息</view>
      </view>
      <view class="remark-content">
        {{ vehicleInfo.remark }}
      </view>
    </view>

    <!-- 时间信息 -->
    <view class="info-section">
      <view class="section-header">
        <view class="section-title">系统信息</view>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ formatDate(vehicleInfo.createTime) }}</text>
        </view>
        <view class="info-item" v-if="vehicleInfo.updateTime">
          <text class="info-label">更新时间</text>
          <text class="info-value">{{ formatDate(vehicleInfo.updateTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <button class="action-btn edit-btn" @click="editVehicle">
        <uni-icons type="compose" size="20" color="#fff"></uni-icons>
        编辑
      </button>
      <button v-if="vehicleInfo.isDefault !== '1'" class="action-btn default-btn" @click="setDefault">
        <uni-icons type="star" size="20" color="#fff"></uni-icons>
        设为默认
      </button>
      <button class="action-btn delete-btn" @click="deleteVehicle">
        <uni-icons type="trash" size="20" color="#fff"></uni-icons>
        删除
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vehicleId: null,
      vehicleInfo: {},
      drivingLicenseImages: [],
      operatingLicenseImages: [],
      vehicleTypes: {
        0: '货车',
        1: '面包车',
        2: '小型车',
        3: '其他',
      },
    };
  },

  computed: {
    hasLicenseImages() {
      return this.drivingLicenseImages.length > 0 || this.operatingLicenseImages.length > 0;
    },
  },

  onLoad(options) {
    if (options.id) {
      this.vehicleId = options.id;
      this.loadVehicleDetail();
    }
  },

  methods: {
    // 加载车辆详情
    async loadVehicleDetail() {
      try {
        uni.showLoading({ title: '加载中...' });
        const res = await this.$http.get(`/system/vehicle/get/${this.vehicleId}`);

        if (res.code === 200 && res.data) {
          this.vehicleInfo = res.data;

          // 处理证件图片
          if (res.data.drivingLicensePhoto) {
            this.drivingLicenseImages = res.data.drivingLicensePhoto.split(',').filter((img) => img);
          }
          if (res.data.operatingLicensePhoto) {
            this.operatingLicenseImages = res.data.operatingLicensePhoto.split(',').filter((img) => img);
          }
        }
      } catch (error) {
        console.error('加载车辆详情失败:', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none',
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 获取车辆类型名称
    getVehicleTypeName(type) {
      return this.vehicleTypes[type] || '未知';
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },

    // 拨打电话
    makeCall() {
      if (this.vehicleInfo.driverPhone) {
        uni.makePhoneCall({
          phoneNumber: this.vehicleInfo.driverPhone,
        });
      }
    },

    // 预览图片
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: current,
      });
    },

    // 查看所有证件
    viewLicenses() {
      uni.navigateTo({
        url: `/pages/vehicle/license?id=${this.vehicleId}`,
      });
    },

    // 编辑车辆
    editVehicle() {
      uni.navigateTo({
        url: `/pages/vehicle/edit?id=${this.vehicleId}`,
      });
    },

    // 设置默认车辆
    async setDefault() {
      try {
        uni.showLoading({ title: '设置中...' });
        const res = await this.$http.put(`/system/vehicle/setDefault/${this.vehicleId}`);

        if (res.code === 200) {
          uni.showToast({
            title: '设置成功',
            icon: 'success',
          });
          this.vehicleInfo.isDefault = '1';
          // 更新页面数据
          this.loadVehicleDetail();
        } else {
          uni.showToast({
            title: res.msg || '设置失败',
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('设置默认车辆失败:', error);
        uni.showToast({
          title: '设置失败',
          icon: 'none',
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 删除车辆
    deleteVehicle() {
      uni.showModal({
        title: '确认删除',
        content: `确定要删除车辆 ${this.vehicleInfo.vehiclePlate} 吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '删除中...' });
              const response = await this.$http.delete(`/system/vehicle/${this.vehicleId}`);

              if (response.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success',
                });
                setTimeout(() => {
                  uni.navigateBack();
                }, 1500);
              } else {
                uni.showToast({
                  title: response.msg || '删除失败',
                  icon: 'none',
                });
              }
            } catch (error) {
              console.error('删除车辆失败:', error);
              uni.showToast({
                title: '删除失败',
                icon: 'none',
              });
            } finally {
              uni.hideLoading();
            }
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.vehicle-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 状态卡片 */
.status-card {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: #fff;
  padding: 40rpx 30rpx;
  position: relative;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-plate-large {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.plate-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.status-badge {
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  background: rgba(255, 255, 255, 0.2);
}

.status-badge.active {
  background: #52c41a;
}

.status-badge.inactive {
  background: #fa8c16;
}

.default-tag {
  display: inline-flex;
  align-items: center;
  gap: 8rpx;
  margin-top: 20rpx;
  padding: 8rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  font-size: 24rpx;
}

/* 信息区块 */
.info-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding-left: 12rpx;
  border-left: 4rpx solid #1890ff;
}

.more-btn {
  display: flex;
  align-items: center;
  gap: 4rpx;
  font-size: 26rpx;
  color: #999;
}

.info-list {
  padding: 20rpx 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 4rpx;
  color: #1890ff;
  font-size: 26rpx;
  padding: 4rpx 12rpx;
  border: 1rpx solid #1890ff;
  border-radius: 20rpx;
}

/* 证件预览 */
.license-preview {
  padding: 30rpx;
}

.license-group {
  margin-bottom: 30rpx;
}

.license-group:last-child {
  margin-bottom: 0;
}

.license-label {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  display: block;
}

.license-images {
  display: flex;
  gap: 20rpx;
}

.license-thumb {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  background: #f5f5f5;
}

/* 备注内容 */
.remark-content {
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

/* 底部操作 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  font-size: 30rpx;
  border: none;
  color: #fff;
}

.edit-btn {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.default-btn {
  background: linear-gradient(135deg, #ff9500 0%, #ffb84d 100%);
}

.delete-btn {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
}
</style>
